<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-07-02 22:38:23
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 消费充值记录
-->
<template>
  <div class="account-table-box">
    <div class="tabs-box">
      <div v-for="item in tabsList" :key="item.id" class="tabs" :class="{ active: item.id === chooseTabs.id }"
        @click="chooseFun(item)">
        {{ item.name }}
        <div v-if="item.id === chooseTabs.id" class="line"></div>
      </div>
    </div>
    <div class="contral-box">
      <div class="con-list">
        <el-select v-model="contralData.type" class="z-select" placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="con-list con-list2">
        <el-date-picker v-model="contralData.time" class="z-time" type="datetimerange"
          :value-format="'yyyy-MM-dd HH:mm:ss'" :picker-options="pickerOptions" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
      </div>
      <el-button type="primary" @click="seachFun()">查询</el-button>
    </div>
    <div class="account-table-con">
      <component :is="chooseTabs.cont" ref="child" :contral-data="contralData" />
    </div>
  </div>
</template>

<script>
import TableConsume from './table-consume.vue'
import TableRecharge from './table-recharge.vue'
import { getPropertyTypeApi } from '@/api/user'
export default {
  name: 'AccountTable',
  components: {
    TableConsume,
    TableRecharge
  },
  data() {
    return {
      tabsList: [
        { name: '消费记录', id: '1', cont: 'TableConsume' },
        { name: '充值记录', id: '2', cont: 'TableRecharge' }
      ],
      chooseTabs: { name: '消费记录', id: '1', cont: 'TableConsume' },
      typeOptions: [{
        value: '',
        label: '请选择'
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      contralData: {
        type: '',
        time: ''
      }
    }
  },
  computed: {},
  created() {
    this.getTypeOp()
  },
  methods: {
    chooseFun(item) {
      this.chooseTabs = JSON.parse(JSON.stringify(item))
    },
    getTypeOp() {
      getPropertyTypeApi().then((res) => {
        const op = res.data
        op.unshift({
          value: '',
          label: '请选择'
        })
        this.typeOptions = op
      })
    },
    seachFun() {
      // console.log(this.contralData)
      this.$refs.child.getTableData()
    },
    runTo(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-table-box {
  width: 100%;
  height: 100%;

  .tabs-box {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-weight: 400;
    font-size: 14px;
    color: #9E9E9E;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;

    .tabs {
      padding: 0 30px;
    }

    .tabs.active {
      font-weight: 600;
      font-size: 14px;
      color: #04D1B8;

      .line {
        width: 30px;
        height: 2px;
        background: #04D1B8;
        margin: 0 auto;
      }
    }
  }

  .contral-box {
    width: 100%;
    height: 32px;
    font-weight: 400;
    font-size: 14px;
    color: #9E9E9E;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;

    .con-list {
      width: 240px;
      height: 100%;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #E0E0E0;
      margin-right: 12px;
    }

    .con-list2 {
      width: 360px;
    }
  }

  .account-table-con {
    width: 100%;
    height: calc(100% - 88px);

  }

}
</style>
